<template>
  <div id="articleContent">
    <div class="container">
      <div class="title">
        <div class="label">
          <van-tag
            round
            color="#ffe1e1"
            text-color="#ad0000"
            v-for="item in cloneArticleContent.labels"
            :key="item.id"
          >
            #{{ item.name }}#</van-tag
          >
        </div>
        <h3>{{ cloneArticleContent.title }}</h3>
        <div class="titlefooter">
          <div class="leftBox">
            <img
              :src="
                cloneArticleContent.author && cloneArticleContent.author.avatar
              "
              alt=""
            />
            <span>{{
              cloneArticleContent.author && cloneArticleContent.author.name
            }}</span>
            <span>{{ calcDate(cloneArticleContent.updateAt) }}</span>
          </div>
          <div class="rightBox">
            <span>评论数:{{ cloneArticleContent.commentCount }}</span>
          </div>
        </div>
      </div>
      <div class="content" v-highlight v-html="cloneArticleContent.content">
        {{ cloneArticleContent.content }}
      </div>
      <van-divider content-position="right"
        >by
        {{
          cloneArticleContent.author && cloneArticleContent.author.name
        }}</van-divider
      >
    </div>

    <div class="commentIcon">
      <van-icon
        name="chat-o"
        size="16px"
        :badge="
          cloneArticleContent.commentCount
            ? cloneArticleContent.commentCount
            : ''
        "
      />
    </div>
    <div class="commentcontainer">
      <div class="loginTitle" v-if="!isLogin">
        <p>登录以发表评论</p>
        <van-button type="info" size="mini" @click="goLogin">现在登录</van-button>
      </div>

      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        class="commentList"
      >
        <comment-cell
          v-for="item in treeData"
          @callBackComment="callBackComment"
          :key="item.id"
          :item="item"
          >{{ item.name }}</comment-cell
        >
      </van-list>
    </div>
    <!-- 发表评论 -->
    <div class="sendComment" v-if="!isComment2Comment">
      <van-search
        @search="goSendComment"
        v-model="myComment"
        show-action
        placeholder="发表你的看法"
      >
        <template slot="left-icon">
          <van-icon name="more-o" />
        </template>
        <template slot="action">
          <van-icon
            @click="goSendComment"
            name="upgrade"
            size="16px"
            color="orange"
          />
        </template>
      </van-search>
    </div>
    <!-- 评论评论 -->
    <div class="comment2commentBox" v-else>
      <div class="contentbox">
        <van-field
          v-model="myComment"
          autosize
          clearable
          rows="3"
          :label="'评论: @' + CommentTargetName"
          type="textarea"
          placeholder="请输入留言"
        >
          <template #right-icon>
            <van-icon name="guide-o" @click="comment2Comment" />
          </template>
          <template #extra>
            <van-icon name="cross" @click="closeC2CPanel" />
          </template>
        </van-field>
      </div>
    </div>
  </div>
</template>

<script src="./js"></script>

<style scoped lang="less">
@import url('./style/index.less');
</style>
